<!--
	自定义单选器，不带标签
	author yjl
-->
<template>
	<picker
		class="picker"
		:style="{
			'min-width': width + 'rpx'
		}"
		:range="range"
		range-key="label"
		:value="startIndex"
		@change="select"
	>
		<view class="msg">
			<view
				class="value"
				:class="value ? '' : 'input-placeholder'"
			>
				{{value ? value.label : placeholder}}
			</view>
			<u-icon
				name='arrow-down-fill'
				size="26"
			/>
		</view>
	</picker>
</template>

<script>
export default {
  props: {
    /* 宽度 */
    width: {
      type: Number,
      default: 200
    },
    /* 数组 */
    range: {
      type: Array,
      default: () => []
    },
    /* 无值填充 */
    placeholder: {
      type: String,
      default: ''
    },
    /* 起始下标 */
    startIndex: {
      type: Number,
      default: 0
    },
    /* 绑定值 */
    value: Object || String || Number
  },
  methods: {
    select(e) {
      this.$emit('input', this.range[ e.detail.value ])
    }
  }
}
</script>

<style lang="scss" scoped>
.picker {
  position: relative;
  background-color: $primary5;
  border-radius: $radiusLarge;

  .msg {
    display: flex;
    align-items: center;
    padding: 0 10px;
  }

  .value {
    flex: 1;
    height: 26px;
    margin-right: 5px;
    font-size: $sSmall;
    line-height: 26px;

    @include textEllipsis(1);
  }
}
</style>
